<!--
 * @Description:
 * @Date: 2023-12-20 14:19:12
 * @LastEditTime: 2025-08-13 17:07:48
-->
<template>
  <div id="gridFour" style="width: 100%;height: 100%;" ref="gridFour" />
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/shine"); // echarts theme
import resize from "../mixins/resize";

export default {
  mixins: [resize],
  props: {
    chartData: {
      type: Array,
      required: false,
      default: []
    },
  },
  watch: {
    chartData: {
      deep: true,
      immediate: true,
      handler: function (val) {
        this.$nextTick(() => {

          this.initChart(val);
        });
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.initChart();
    // });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart(data) {

      if (!this.chart) {
        this.chart = echarts.init(this.$refs.gridFour, "macarons");
      }


      var yData = [];
      var barData = data.map(item => { return { value: item.num ? ((item.target / item.num) * 100).toFixed(2) : 0, label: item.name.slice(0, 5) } });

      barData = barData.sort(function (a, b) {
        return b.value - a.value;
      });
      for (var j = 0; j < barData.length; j++) {
        if (j < 10) {
          yData.push("0" + j + barData[j].label);
        } else {
          yData.push(j + barData[j].label);
        }
      }
      this.chart &&
        this.chart.setOption(
          {
            backgroundColor: "#010d3a",
            grid: {
              left: "-10%",
              right: "15%",
              bottom: 0,
              top: 20,
              containLabel: true,
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: {
              show: false,
            },

            yAxis: {
              type: "category",
              inverse: true,
              nameGap: 16,
              axisLine: {
                show: false,
                lineStyle: {
                  color: "#ddd",

                },

              },
              axisTick: {
                show: false,
                lineStyle: {
                  color: "#ddd",
                },
              },
              axisLabel: {

                interval: 0,
                margin: 150,
                textStyle: {
                  color: "#fff",
                  align: "left",
                  fontSize: 16,
                },
                rich: {
                  padding: [10, 10, 10, 10],
                  a: {
                    color: "#fff",
                    backgroundColor: "#f0515e",
                    width: 25,
                    height: 25,
                    align: "center",
                    borderRadius: 2,

                  },
                  b: {
                    color: "#fff",
                    backgroundColor: "#24a5cd",
                    width: 25,
                    height: 25,
                    align: "center",
                    borderRadius: 2,

                  },
                },
                formatter: function (params) {
                  if (parseInt(params.slice(0, 2)) < 3) {
                    return [
                      "{a|" +
                      (parseInt(params.slice(0, 2)) + 1) +
                      "}" +
                      "  " +
                      params.slice(2),
                    ].join("\n");
                  } else {
                    return [
                      "{b|" +
                      (parseInt(params.slice(0, 2)) + 1) +
                      "}" +
                      "  " +
                      params.slice(2),
                    ].join("\n");
                  }
                },
              },
              data: yData,
            },
            series: [
              {
                name: "barSer",
                type: "bar",
                roam: false,
                visualMap: false,
                zlevel: 2,
                barMaxWidth: 30,
                barGap: 0,
                itemStyle: {
                  normal: {
                    color: function (params) {
                      var colorList = [
                        {
                          colorStops: [
                            {
                              offset: 0,
                              color: "#f0515e",
                            },
                            {
                              offset: 1,
                              color: "#ef8554",
                            },
                          ],
                        },
                        {
                          colorStops: [
                            {
                              offset: 0,
                              color: "#3c38e4",
                            },
                            {
                              offset: 1,
                              color: "#24a5cd",
                            },
                          ],
                        },
                      ];
                      if (params.dataIndex < 3) {
                        return colorList[0];
                      } else {
                        return colorList[1];
                      }
                    },
                    barBorderRadius: [0, 15, 15, 0],
                  },
                },
                label: {
                  normal: {
                    show: true,
                    textBorderColor: "#24a5cd",
                    fontSize: 17,
                    fontWeight: 'bold',
                    position: ["105%", "0"],
                    distance: 1,
                    formatter: function (params) {
                      return params.value + "%";
                    },
                  },
                },
                data: barData.sort((a, b) => {
                  return b.value - a.value;
                }),
              },
            ],
          }
        );
    },
  },
};
</script>
<style lang="scss" scoped>
.pie2 {
  width: 100%;
  height: 100%;
}
</style>
